With the
advent of the Button Editor in Fireworks 3, users have a feature that
makes button creation quick and easy. Here are some rules to follow
that will help users get the most out of this new feature.
Creating a button
in Fireworks Creating a button is
easy in Fireworks. Anything can be done in the Button Editor that can
be done on the canvas with a few exceptions. These will be covered in the
steps below. For information on how to build Nav Bars and export your
buttons, refer to the Additional Information
section at the bottom of this TechNote.
There are
several ways to create a button:
1
If the graphics
for the button have already been imported/created on the canvas,
choose Insert > Convert to Symbol and click the "Button" radio
button in the Symbol Properties dialog that appears.
2
If the
graphics for the button have not been created yet, choose Insert
> New Button.
Windows
Macintosh
3
Choose Insert
> Libraries and choose from any of the pre-built Buttons or Nav
Bars libraries or choose Other... to select a button symbol from any
Fireworks PNG file on your system that contains a button
symbol.
Using the
Button Editor do the following:
1
Once the
button editor is open, View options are available just as they are
on the canvas. Grids, Guides, Rulers and Show/Hide options are all
available. Think of a button in Fireworks as a document inside your
document. The Layers panel will display a slice
and Layer 1 will be highlighted, indicating that you are ready to
create or edit objects on that layer. The Frames panel will display
four frames, each one corresponding to the Up, Over, Down and Over
While Down tabs of the Button Editor, and Frame 1 is highlighted,
indicating that you are about to edit or create content in Frame 1
(the Up tab) of the Button Editor:
Also
notice that the size of the button editor corresponds to the size of
the canvas.
The
canvas in this button has been resized to x=72, y=36, and a vertical
guide has been placed across the center point.
This
button was produced by creating a rounded rectangle, setting the
first color and effect, cloning, changing the color, cloning,
cutting diagonally with the knife tool, then cutting and using the
paste inside command in the View menu to get the two colored buttons
into the separate halves of the divided button. Text can now be
added to the button if so desired.
Some
users like to create graphic buttons that will be inserted into new
buttons and then add text to the new button. This technique is
called nesting. This allows the user to change the graphic button
symbol in the Library panel, which will cause all buttons that the
graphic button symbol was inserted into to be globally updated. This
works fine as long as the graphic button's active area is exactly
the same size and shape as the active area of the button it will be
inserted into. Nesting buttons creates overlapping slices, which
will behave according to the following rules:
In
Fireworks 3, the bottom slice or hotspot in a stacked Web
object incident will always export the behaviors attached to
the underlying Web object (slice or hotspot). Because of this,
if you have a graphic button like an arrow or bullet which is
inserted into a text button which will have the text to the
right of the graphic, only the slice over the graphic button
will pass a behavior. The active area that is over the text
will be ignored as far as the button behavior is concerned. In
some cases this will affect button behavior so that the image
part of the button behaves independently of the text part. See
Example 1.
In
Fireworks 4, the top slice in a series of stacked slices will
control the behavior of the underlying objects. This makes
nested buttons much more dependable by circumventing the
independent behavior found in the Fireworks 3 buttons. See Example 2.
Note: In both
cases above, the existence of nested buttons on in the
Fireworks PNG file will cause an alert indicating that you
have one or more when you choose to export the file:
Note: If the button is
going to be one of several in a nav bar, find the longest string of
characters to be used on the button and enter that text or the same
number of characters to get the correct size for the text. One of
the hardest things to deal with is returning to a button to adjust
the size of the text or the button's graphics. Center align the text
to control its position over the graphic elements.
2
Once the
initial button state is created, click the Over tab and then click
the "Copy Up Graphic" button to bring a copy of the button in the Up
state into the Over tab. Make changes to the colors, effects, text
and button location to make the rollover interesting to the viewer.
If desired an entirely different graphic or an image may be used for
the over state.
Note:
Text in the Button Editor can be very tricky to deal with unless you
understand how it works. If you want to use different text in your
button states (See Example 3), do not click the Yes
button in the Update the text in the other button states
dialog:
This alert appears
because text in the various states of the Button Editor is
dynamically linked, allowing users to set the text of all states for
individual button instances using the Object panel. If you plan to
change your button instance's text later in the Object panel, make
sure that the same text is on all button states. Also you should be
aware that Fireworks 3 and 4 do not properly support editing
multiple lines of text in button instances via the Object panel, so
plan ahead if you want varying text strings or multiple lines of
text on your button instances. For more information see Button
text does not update correctly (TechNote #14344).
If you
are creating a simple up and over rollover, go to the Active
Area tab next.
Note: Use Onion
Skinning to compare the location of the Over state button with the
Up state button. Be careful not to confuse Onion Skinning with the
actual presence of a graphic in the Over state tab. Also Many
Windows users set their default font in their display settings to
"Large Fonts". When Large Fonts is set as the default display font,
the Button Editor can display with Onion Skinning on by default. To
make matters worse, the Onion Skinning settings in Fireworks default
to have Multi-Frame Editing turned on. You can check this by opening
the Frames panel and clicking on the Onion Skinning button at the
bottom left of the panel and checking to see if Onion Skinning is
enabled and if Multi-Frame editing is also enabled. If these two
settings are checked in the Onion Skinning pop-up menu, any edits
you perform on the Over, Down and Over While Down states will
actually be applied to the Up state because the object in the Up
state is at the top of the frame stack. This issue is discussed in
detail in Parts
of the user interface are missing in Fireworks 3 (TechNote
#14223).
3
Continue
creating the button by clicking the Down tab and clicking the "Copy
Over Graphic" tab in the Button Editor. The Down state is the
condition of the button when the mouse has clicked the
button.
Be sure
to check that Onion Skinning is turned off to make sure that the
Over state is copied up. A common error is to assume that an image
is copied up when actually Onion Skinning is just showing the
previous button state.
As in
the Over state, the graphic can be from an entirely different source
than the other states. Set the colors, effects, text, and location
to make the down state unique and interesting.
4
If the
button is going to be used in a nav bar, be sure to check the
"Include Nav Bar Down state" checkbox. If the nav bar is going to be
used in a series of pages and not in a frameset as a nav bar
control, be sure to check the "Show Down State Upon Load"
checkbox.
If you
are creating just an up, over, and down button, go to the Active
Area tab next.
5
Continue
creating the button by clicking the Over While Down tab and clicking
the "Copy Down Graphic" tab in the Button Editor. The Over While
Down state is the condition of the button when the mouse has clicked
the button and has subsequently returned to be over the button while
it is still down.
Be sure
to check that Onion Skinning is turned off to make sure that the
Down state is copied up. A common error is to assume that an image
is copied up when actually Onion Skinning is just showing the
previous button state.
If the
button is going to be used in a nav bar, be sure to check the
"Include Nav Bar Over While Down state" checkbox.
6
Continue
creating the button by clicking the Active Area tab. The active area
is merely a "smart slice" that moves with the button graphic on the
canvas and defines a table cell where the rollover action will
occur. You can check the Layers panel while you are in the Button
Editor to see that the Active area is defined by a slice object in
the Web layer.
The
Active Area can be edited by choosing either the Pointer or the
Subselection tools and dragging the selection handles at the corners
of the slice to the desired location on the Button Editor's canvas.
This will disable the "Set Active Area Automatically" option. To
restore the automatic feature, just select the checkbox at the top
left of the Button Editor.
Note: The active area
can be defined manually by deselecting the "Set Active Area
Automatically" checkbox and using the Polygon Slice tool to create
an active area. Another way to do this is to select the shape in one
of the other tabs of the Button Editor, choose Insert > Hotspot
and then Insert > Slice to quickly create an active area that
conforms to the shape of the object exactly.
Note: Setting the active area using a
polygon slice or by inserting a hotspot and then a slice to generate
a polygon slice will affect the way button names for the Over, Down
and Over While Down states will be appended. In Fireworks 3 and 4,
the button states will be appended with the "_f6","_f7" and "_f8"
suffixes instead of those set in the Document Specific tab of the
HTML Properties (Fireworks 3) and HTML Setup (Fireworks
4).
7
Continue
creating the button by clicking the Link Wizard button. The Link
Wizard lets the user quickly define export settings, Link URLs, Alt
tags, Status Bar messages, Frame and Page targets. It also sets the
base file name for the button images under the Active Area and any
HTML file that will be generated when the HTML Properties is set to
"Multiple Nav Bar HTML Pages". If you want to use your button in a
Nav Bar, it's best only to set the Export Settings in the Link
Wizard now. You can set the various other settings using the Object
panel's Link Wizard feature to set individual properties for your
button instances.
Once the
Link Wizard settings are made, click OK. The initial button will
appear in the center of the canvas and in the Library panel. Drag
the button from the Library to the canvas to create additional
instances of the button on the canvas. You can also place a series
of buttons in a graphic symbol which can be used as a Nav Bar. This
will enable you to easily share the Nav Bar with other Fireworks
files via the Insert > Libraries menu command.
Note: One difference
between Fireworks 3 and 4 is that in Fireworks 3, buttons are always
stored on shared layers. This made it necessary to keep buttons on a
single separate layer in the document. In Fireworks 4, buttons are
stored on non-shared layers. This allows users the freedom to place
other objects on the same layer with the buttons.
